import {defineComponent, ref, h, DefineComponent, inject,} from "vue";
import {NCard, NButton, NSpace,NIcon,} from "naive-ui"
import Maincontainer from "@/components/maincontainer/index"
import Flexform, {flexformitem} from "@/components/flexform/index"
import useTableIndex from "@/hooks/tableindex"
import useHttpMessage from "@/hooks/oftenattr"
import useColums from "@/hooks/colums"
import Flextalbe from "../../../components/flextable/index"
import Mypage from "../../../components/mypage/index"
import {ViewFilled,Edit,Delete,ResetAlt,} from "@vicons/carbon"
import {SearchOutlined,PlusOutlined,} from "@vicons/antd"
import EditModel from "./editModel"
export default defineComponent({
    name: "testquestions",
    setup() {
        const {
            formValue,
            loading,
            total,
            tableData,
            editRef,
            pageRef,
            formRef,
            handleSearch,
            handleResetForm,
            handleCreate,
            refreshDelete
        } = useTableIndex()
        const {http, message} = useHttpMessage()
        // 自定义属性区域
        const overDeleteFunc: Function | undefined = inject("overDeleteFunc")
        const handleDelete = (data: any, index: number) => {
            const params = {"id": data.id}
            overDeleteFunc && overDeleteFunc(params, http.zidiandelete, refreshDelete, "字典")
        }
        const positionTypeList=ref([
            {label: "单选题", value: "0"},
            {label: "判断题", value: "1"},
            {label: "多选题", value: "2"},
        ])
        // 点击查看
        const handleView=(data:any)=>{
            http.testquestionget(null,data.id,loading).then((res:any)=>{
                if(res.data.success){
                    editRef.value?.handleInit("view",res.data.data)
                }else{
                    message.error(res.data.msg || "获取详情失败")
                }
            }).catch(err=>{
                message.error(err.message || "系统错误")
            })
        }
        //点击修改
        const handleEdit=()=>{}
        const formList = ref([
            {
                span: 6,
                label: "名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
            },
            {slot: (item: flexformitem) => <div class="w-full"/>, span: 6, type: "slot"},
            {slot: (item: flexformitem) => <div class="w-full"/>, span: 6, type: "slot"},
            {
                slot: (item: flexformitem) => <NSpace class="mt-3px">
                    <NButton size={"small"} onClick={handleSearch} type={"success"} v-slots={{icon: ()=><NIcon size={14}>
                            <SearchOutlined />
                        </NIcon>}}>搜索</NButton>
                    <NButton size={"small"} onClick={handleResetForm} type={"error"} v-slots={{icon: ()=><NIcon size={14}>
                            <ResetAlt />
                        </NIcon>}}>重置</NButton><NButton
                    size={"small"} onClick={handleCreate} type={"info"} v-slots={{icon: ()=><NIcon size={14}>
                        <PlusOutlined />
                    </NIcon>}}>新建</NButton></NSpace>,
                span: 6, type: "slot"
            }
        ])
        const {index, createdTime, changeTime, desc, name,} = useColums()
        const colnums = ref([
            index,
            {
                title: "题型",
                key: 'testType',
                render: (data: any, index: number)=>{
                    return positionTypeList.value.find(el=>el.value===data.testType)?.label
                },
            },
            {
                title: "题干",
                key: 'content',
            },
            desc,
            createdTime,
            changeTime,
            {
                title: "操作",
                width: 270,
                render: (data: any, index: number) => {
                    return h(NSpace, {}, {
                        default() {
                            return [
                                h(NButton, {
                                    size: "small",
                                    onClick: () => handleView(data),
                                    type: "primary"
                                }, {
                                    default() {
                                        return "查看"
                                    },
                                    icon(){
                                        return <NIcon size={14}>
                                            <ViewFilled />
                                        </NIcon>
                                    },
                                }),
                                h(NButton, {size: "small", onClick: () => handleEdit(data), type: "info"}, {
                                    default() {
                                        return "修改"
                                    },
                                    icon(){
                                        return <NIcon size={14}>
                                            <Edit />
                                        </NIcon>
                                    },
                                }),
                                h(NButton, {
                                    size: "small",
                                    onClick: () => handleDelete(data, index),
                                    type: "error"
                                }, {
                                    default() {
                                        return "删除"
                                    },
                                    icon(){
                                        return <NIcon size={14}>
                                            <Delete />
                                        </NIcon>
                                    },
                                }),
                            ]
                        }
                    })
                }
            },
        ])

        const getTableDataFunc = (page: number, pageSize: number) => {
            const params = {page,pageSize,}
            http.testquestionlist(params,loading).then((res:any)=>{
                if(res.data.success){
                    tableData.value = res.data.items
                    total.value = res.data.total
                }else{
                    message.error(res.data.msg || "获取数据失败")
                }
            }).catch(err=>{
                message.error(err.message || "系统错误")
            })
        }

        // 初始化函数
        const init = () => {
            pageRef.value?.changePage()
        }
        init()
        return () => (
            <Maincontainer>
                <NCard content-style="padding-bottom: 0;" class="flex-shrink-0">
                    <Flexform v-model={[formValue.value,"value"]} formList={formList.value}/>
                </NCard>
                <NCard class="flex-1" content-style="padding: 0;">
                    <Flextalbe tableData={tableData.value} tableColums={colnums.value}/>
                </NCard>
                <NCard class="h-40px flex-shrink-0"
                       content-style={{display: "flex", justifyContent: "center", alignItems: "center", padding: 0}}>
                    <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc}/>
                </NCard>
                <EditModel ref={editRef} />
            </Maincontainer>
        )
    },
})
